<template>
<svg class="icon " aria-hidden="true" :style="style">
    <use :xlink:href="xlink"></use>
</svg>
</template>

<script>
  export default {
    props:{
      icon:{
        type:String,
        default(){
          return ""
        }
      },
      color:{
        type:String,
        default(){
          return ""
        }
      },
      size:{
        type:Number,
        default(){
          return 0;
        }
      }
    },
    computed:{
      xlink(){
        return "#"+this.icon;
      },
      style(){
        let style = {
          color:this.color
        }
        if(this.size){
          style.fontSize = this.size+"px"
        }
        return style
      }
    }
  }
</script>

<style lang="scss" scoped>

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
